<template>
    <div class="userlist">
        <div class="h3">用户列表</div>
        <div class="data">
            <div class="pager">
                <div>每页显示的数量</div>
                <select v-model="count">
                    <option :value="5">5</option>
                    <option :value="10">10</option>
                    <option :value="15">15</option>
                </select>
            </div>
            <el-table :data="pager.data" >
                <el-table-column prop="uid" label="编号"></el-table-column>
                <el-table-column prop="uname" label="账号"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="status" label="账号状态">
                    <template slot-scope="scope">
                        <div class="tag" :class="{success:scope.row.status,danger:!scope.row.status}">{{scope.row.status | status}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="btn-group">
                            <div class="tagbtn success" @click="nofreeze(scope.row.uid)" v-if="!scope.row.status">解冻</div>
                            <div class="tagbtn danger" @click="freeze(scope.row.uid)" v-if="scope.row.status">冻结</div>
                            <div class="tagbtn danger" @click="resetpwd(scope.row.uid)">重置密码</div>
                            <div class="tagbtn danger">删除</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pageNagation">
                <span @click="loadPrevData" :class="{disabled:pager.pno==1}">上一页</span>
                <span :class="{cur:pager.pno==item}" @click="loadData(count,item)" v-for="item of pager.pageSize" :key="item">{{item}}</span>
                <span @click="loadNextData" :class="{disabled:pager.pno==pager.pageSize}">下一页</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pager:{
                    pno:1, //当前页
                    data:[] //数据
                },
                count:5, //每页显示的数量
            }
        },
        methods:{
            loadData(count,pno){
                const url=`admin/userlist?pno=${pno}&pageNum=${count}`
                this.axios.get(url)
                    .then(res => {
                       this.pager=res.data
                    })
            },
            //冻结账号
            freeze(uid){
                const url=`admin/freeze?uid=${uid}`
                this.axios.put(url)
                    .then(res => {
                        if (res.data.code==200){
                            alert('冻结成功')
                            this.loadData(this.count,this.pager.pno) //重新加载数据
                        }
                    })
            },
            //账号解冻
            nofreeze(uid){
                const url=`admin/nofreeze?uid=${uid}`
                this.axios.put(url)
                    .then(res => {
                        if (res.data.code==200){
                            alert('解冻成功')
                            this.loadData(this.count,this.pager.pno)
                        }
                    })
            },
            loadPrevData(){
                let pno=this.pager.pno-1
                this.loadData(this.count,pno)
            },
            loadNextData(){
                let pno=this.pager.pno+1
                this.loadData(this.count,pno)
            },
            resetpwd(uid){
                const url=`admin/reset_user_pwd?uid=${uid}`
                this.axios.put(url)
                    .then(res => {
                        if (res.data.code==200){
                            alert(res.data.msg)
                        }
                    })
            }
        },
        mounted(){
            this.loadData(this.count,this.pager.pno)
        },
        filters:{
            status(value){
                return ['冻结','正常'][value]
            }
        },
        watch:{
            count(newValue){
                this.loadData(newValue,this.pager.pno)
            }
        }
    }
</script>

<style lang="scss" scoped>
$text-color:#73879C;
.userlist {
    padding: 10px;
    .h3 {
        font-size: 1.5em;
        font-family: '微软雅黑';
        color: $text-color;
        padding-bottom: 15px;
        border-bottom: 3px solid #E6E9ED;
    }
    .data {
        padding-top: 20px;
        .tag {
            color: #fff;
            width: 50px;
            text-align: center;
            padding: 3px;
            margin-right: 5px;
            &.success {
                background-color: green;
            }
            &.danger {
                background-color: #f00;
            }
        }
        .pager {
            display: flex;
            padding-bottom: 20px;
            align-items: center;
            select {
                margin-left: 20px;
                padding: 5px 10px;
                outline: none;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
        }
        ::v-deep .el-table__cell {
            border: none;
        }
        ::v-deep .el-table {
            margin-bottom: 20px;
        }
        .tagbtn {
            color: #fff;
            width: 70px;
            text-align: center;
            border-radius: 5px;
            padding: 3px;
            margin-right: 5px;
            &:hover {
                cursor: pointer;
            }
            &.success {
                background-color: green;
                &:active {
                    background-color: darken(green,10%);
                }
            }
            &.danger {
                background-color: #f00;
                &:active {
                    background-color: darken(#f00,10%);
                }
            }
        }
        .btn-group {
            display: flex;
            align-items: center;
        }
        //分页器
        .pageNagation {
            text-align: right;
            padding-right: 30px;
            span {
                border: 1px solid #dddddd;
                padding: 5px 10px;
                color: #0AA1ED;
                font-size: 0.9em;
                background-color: #fff;
                &.cur {
                    background-color: #337ab7;
                    color: #fff;
                    border: none;
                }
                &:hover {
                    cursor: pointer;
                }
                &.disabled {
                    pointer-events: none;
                    color: $text-color;
                }
            }
        }
    }
}
</style>